<!--
*@Author: QWP
*@Description: 待办事项
*@Date: 2024-07-14 16:47:58
-->
<template>
  <u-card title="待办事项" :bodyStyle="{ paddingTop: '4px' }">
    <a-list
      :data-source="commonDatas"
      :grid="{ gutter: [12, 30], column: 3 }"
      :loading="loading"
    >
      <template #renderItem="{ item }">
        <a-row
          justify="center"
          align="middle"
          class="f-item-hover-bg"
          @click="jumpRouter(item)"
        >
          <div class="u-stay-to-do-icon">
            <u-icon-font :type="item.icon"></u-icon-font>
          </div>
          <div direction="vertical" class="f-flex-column f-margin-l12">
            <span style="font-size: var(--font-size-level-1); color: #333333">
              {{ item.name }}
            </span>
            <span
              style="
                font-family: DIN, DIN;
                font-weight: 500;
                font-size: 24px;
                color: #1890ff;
              "
            >
              {{ item.num }}
              <span
                style="
                  font-family: PingFang SC Medium-Regular;
                  font-size: 12px;
                  color: #333333;
                "
              >
                条
              </span>
            </span>
          </div>
        </a-row>
      </template>
    </a-list>
  </u-card>
</template>

<script lang="ts" setup>
import { ref, reactive, computed, onMounted, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import * as indexApi from '@/service/index';
import { storeToRefs } from 'pinia';
import { useBaseStore } from '@/store';

const { modAndbill } = storeToRefs(useBaseStore());

const router = useRouter();
const route = useRoute();

const loading = ref<boolean>(false);
const commonDatas = ref<any[]>([]);

const type = {
  INC_1: { icon: 'icon-a-lujing1', path: '/TransitIndex/DispatchDoc/2' },
  INC_2: { icon: 'icon-a-lujing1', path: '/TransitIndex/IncomeDoc/2' },
  ADM_2: {
    icon: 'icon-qingjia',
    path: '/TransitIndex/MyAllApplicant/2',
    params: { status: 2 },
  },
  ADM_4: {
    icon: 'icon-huiyiguanli',
    path: '/TransitIndex/OaMeetApplicant/2',
    params: { status: 2 },
  },
  FIN_2: { icon: 'icon-chuchashenqing', path: '/TransitIndex/OaTravel/2' },
  VEHICLE_2: { icon: 'icon-cheliang-mian', path: '/TransitIndex/OaSendCar/2' },
  DYC_1: {
    icon: 'icon-piliangdaoruwenjian',
    path: '/TransitIndex/DynamicFormItem',
  },
  PERSON_1: {
    icon: 'icon-renshiguanli',
    path: '/TransitIndex/PersonalbaseInfo/2',
  },
};

// 获取数据
const getData = async () => {
  loading.value = true;
  try {
    const res = await indexApi.getTodoList();
    if (res.code == 200) {
      const rows = (res.rows || []).map(item => {
        let cItem = modAndbill.value.find(
          o => o.id == `${item.billmajortype}_BIZ_TYPE_${item.billtype}`
        ) || {};

        let tType = `${item.billmajortype}_${item.billtype}`;

        let cParams = type[tType] || { icon: '' };
        // 动态业务需要携带 pType bzType
        if (tType == 'DYC_1') {
          cParams.path = '/TransitIndex/DynamicFormItem/2/' + item.fkdycform;
        }

        return { ...item, ...cItem, ...cParams };
      });

      commonDatas.value = rows;
      commonDatas.value.map(item => {
        // 动态表单的字段转换
        if (item.name == '动态表单') {
          item.name = item.fkdycformname;
        }
      });
    }
  } catch (error) {}
  loading.value = false;
};

// 跳转
const jumpRouter = (item) => {
  if (item.path) {
    router.push({
      path: item.path,
      query: {
        _tab: '1',
        path: item.path,
        label: item.name,
      },
    });
    sessionStorage.setItem(
      'stay_do_params',
      JSON.stringify(item['params'] || {})
    );

    setTimeout(() => {
      sessionStorage.removeItem('stay_do_params');
    }, 2000);
  }
};

onMounted(() => {
  getData();
});

watch(() => route.path, (val) => {
  if(val == '/TransitIndex/Index') {
    getData()
  }
})
</script>

<style lang="scss" scoped>
.u-stay-to-do-icon {
  width: 40px;
  height: 40px;
  background: rgba(24, 144, 255, 0.1);
  border-radius: 8px;
  line-height: 40px;
  text-align: center;
  font-size: var(--font-size-level-2);
  background-color: #1890ff;
  color: #fff !important;
}
</style>
